import { Resizable } from 'react-resizable';
import React, { useEffect, useState } from 'react';
import { Table, Input, Button } from 'antd';
import { request } from 'umi';
import { Modal } from 'antd';
import {
  ProFormText,
  ProFormDateRangePicker,
  ProFormSelect,
} from '@ant-design/pro-components';
import '@/pages/work/work4/work4.less';
export default function Index() {
  const [apply, setApplys] = useState([]); //  总数据渲染
  const [acolumns, setAcolumns] = useState([
    {
      title: '序号',
      key: '_id',
      width: 40,
      render: (text: any, record: any, index: any) => <>{index + 1}</>,
      ellipsis: true,
    },
    {
      title: '列表名称',
      key: 'anumber',
      width: 240,
      dataIndex: 'anumber',
      ellipsis: true,
    },

    {
      title: '所属类别',
      dataIndex: 'department',
      key: 'department',
      ellipsis: true,
      width: 100,
    },
    {
      title: '表单名称',
      dataIndex: 'technological',
      key: 'technological',
      ellipsis: true,
      width: 480,
    },

    // {
    //     title: '表单布局',
    //     dataIndex: 'applyTime',
    //     key: 'applyTime',
    //     ellipsis: true,
    //     width: 100,
    // },
    // {
    //     title: '每行列数',
    //     dataIndex: 'prodepartment',
    //     key: 'prodepartment',
    //     ellipsis: true,
    //     width: 100,
    // },
    // {
    //     title: '自适应',
    //     dataIndex: 'daname',
    //     key: 'daname',
    //     ellipsis: true,
    //     width: 100,
    // },
    // {
    //     title: '打开方式',
    //     dataIndex: 'status',
    //     key: 'status',
    //     ellipsis: true,
    //     width: 100,
    // },
    {
      title: '列表Url',
      dataIndex: 'status',
      key: 'status',
      ellipsis: true,
      width: 100,
    },
    {
      title: '状态',
      dataIndex: 'aname',
      key: 'aname',
      ellipsis: true,
      width: 100,
    },
    // {
    //     key: 'proccessed',
    //     ellipsis: true,
    //     width: 100,
    //     render: (text: any) => <a>催办</a>,
    // },
    // {
    //     key: 'submit',
    //     ellipsis: true,
    //     width: 100,
    //     render: (_: any, record: any) => (
    //         <a
    //             onClick={() => {
    //                 setIsModalOpen(true);
    //                 setId(record._id);
    //             }}
    //         >
    //             提交
    //         </a>
    //     ),
    // },
  ]);
  // 提交的_id
  const [_id, setId] = useState('');
  const [components, setComponents] = useState({});
  const stateData = () => {
    request('/api/ljf/apply').then((res) => {
      setApplys(res.apply);
    });
    setComponents({
      header: {
        cell: ResizeableTitle,
      },
    });
  };
  useEffect(() => {
    stateData();
  }, []);

  const ResizeableTitle = (props: any) => {
    const { onResize, width = 100, ...restProps } = props;
    if (!width) {
      return <th {...restProps} />;
    }
    return (
      <Resizable width={width} height={38} onResize={onResize}>
        <th {...restProps} />
      </Resizable>
    );
  };
  const handleResize =
    (index: any) =>
    (e: any, { size }: any) => {
      const nextColumns = [...columns];
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width,
      };
      setAcolumns(nextColumns);
    };
  const columns = acolumns.map((col, index) => ({
    ...col,
    onHeaderCell: () => ({
      width: col.width || 100,
      onResize: handleResize(index),
    }),
  }));
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const onSelectChange = (newSelectedRowKeys: any) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  // 提示文字
  const [keyWord, setKeyWord] = useState('');
  // 提示框
  const [isModalOpen, setIsModalOpen] = useState(false);
  // 取消弹框
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  return (
    <div className="applys">
      {/* <div className="applysearch">
                <ProFormText width="md" name="name" label="流程名称" />
                <ProFormDateRangePicker name="dateRange" label="发起日期" />
                <ProFormText width="md" name="name" label="发起人" />
                <ProFormText width="md" name="name" label="待办人" />
                <ProFormSelect
                    name="select"
                    label="状态"
                    valueEnum={{
                        china: '全部(不含作废)',
                        usa: '审批中',
                        usa0: '审批完成',
                        usa1: '退回',
                        usa2: '委托',
                        usa3: '作废',
                    }}
                />
                <button className="searcha">查询</button>
            </div> */}
      <div className="applyTable">
        <Table
          components={components}
          columns={columns}
          pagination={false}
          bordered
          rowKey="_id"
          scroll={{
            x: 1278,
            y: 460,
          }}
          rowSelection={rowSelection}
          onRow={(record, index) => {
            return {
              onClick: (e) => {
                let tr = e.target?.parentNode;
                for (let i = 0; i < tr.parentNode.childNodes.length; i++) {
                  tr.parentNode.childNodes[i].style.color = 'black';
                }
                tr.style.color = '#e17009';
              },
            };
          }}
          dataSource={apply}
        />
      </div>
      <div className="alpplybottom">
        <span className="iconfont icon-xiangzuoshuangjiantou"></span>
        <span className="iconfont icon-xiangzuojiantou"></span>
        <span className="iconfont icon-vertical_line"></span>
        第
        <Input value={1} />
        页，共1页
        <span className="iconfont icon-vertical_line"></span>
        <span className="iconfont icon-xiangyoujiantou"></span>
        <span className="iconfont icon-xiangyoushuangjiantou"></span>
        <span className="iconfont icon-vertical_line"></span>
        每页记录数：
        <Input value={50} />
        <Button>确定</Button>
      </div>
      <Modal
        className="modalopen"
        title="是否确认提交该数据？"
        open={isModalOpen}
        onCancel={handleCancel}
        footer={null}
      >
        <button
          onClick={() => {
            console.log(_id, 2222222);
            request('/api/ljf/applySuccess', {
              method: 'post',
              data: { _id },
            }).then((res) => {
              if (res.code === 200) {
                handleCancel();
                stateData();
              }
            });
          }}
          style={{ marginTop: '20px' }}
        >
          确定
        </button>
      </Modal>
    </div>
  );
}
